<template>
  <div class="loginBox">
    <div class="title">
      <span class="iconfont icon-left leftIcon" @click="()=>{this.$router.go(-1)}"></span>
      <p class="centerText">会员登录</p>
    </div>
    <div class="fromSty">
      <div class="userNameSty">
        <span>用户名:</span>
        <input class="inputSty" v-model="userName" placeholder="请输入邮箱/手机号" type="text" />
      </div>
      <div class="passwordSty">
        <span>密码:</span>
        <input class="inputSty" v-model="password" placeholder="密码" type="password" />
      </div>
      <div>
        <van-button type="danger" block style="border-radius: 5px;" @click="Login()">登录</van-button>
      </div>
    </div>
    <div class="loginAuto">
      <div class="checkbox">
        <van-checkbox v-model="checked" shape="square">自动登录</van-checkbox>
      </div>
      <div class="rightLink">
        <span>
          <router-link to="/register" style="color:rgba(123, 167, 199)">免费注册</router-link>
        </span>
        <span style="padding-left:15px">
          <router-link to="/retrieve_password" style="color:rgba(123, 167, 199)">忘记密码?</router-link>
        </span>
      </div>
    </div>
    <div class="bottomlink">
      <p>第三方登录</p>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    checked: false,
    userName: null,
    password: null
  }),
  created() {},
  methods: {
    Login() {
      ////console.log("Login");
      this.$axios
        .login(
          `ym/oauth/token?username=${this.userName}&password=${this.password}&grant_type=password&client_id=app&client_secret=app`
        )
        .then(msg => {
          //console.log(msg)
          if (msg.status === 200 && msg.data.code === 0) {
            let userMobileOrPwd = {
              userName: this.userName,
              password: this.password,
              time: +new Date() + 3600 * 1000 * 24 * 7
            };
            if (this.checked) {
              localStorage.setItem("userPwd", JSON.stringify(userMobileOrPwd));
            } else {
              if (JSON.parse(localStorage.getItem("userPwd"))) {
                localStorage.setItem("userPwd", null);
              } else {
                //console.log('本地没有缓存')
              }
              //console.log("no store pwd");
            }
            this.$store.commit("SAVEUSERINFO", JSON.stringify(msg.data.data));
            this.$Toast(msg.data.msg)
            this.$router.push("/");
            this.getUserInfo();
          } else {
            this.$Toast(msg.data.msg)
          }
        });
    },
    getUserInfo() {
      this.$axios.get(`ym/memberuser/user-info`).then(msg => {
        if (msg.code === 0) {
          this.$store.commit("SAVEMEMBERINFO", JSON.stringify(msg.data));
        } else {
          ////console.log('获取用户信息失败！')
        }
      });
      this.$axios.get(`ym/menu/list`).then(msg => {
        window.console.log(msg);
      });
    }
  }
};
</script>
<style lang="scss">
.loginBox {
  height: 100vh;
  background: rgba(240, 240, 240);
  .title {
    border-bottom: 1px solid #ccc;
    .leftIcon {
      position: absolute;
      top: 10px;
      left: 10px;
    }
    .centerText {
      margin: 0;
      padding: 10px;
      text-align: center;
    }
  }
  .fromSty {
    div {
      margin: 15px 15px 28px 15px;
    }

    .inputSty {
      width: 60%;
      padding-left: 5px;
      outline: none;
      height: 32px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .userNameSty {
      color: #666;

      span {
        display: inline-block;
        text-align: left;
        width: 20%;
        margin: 0 10px;
      }
    }

    .passwordSty {
      color: #666;

      span {
        display: inline-block;
        text-align: left;
        width: 15%;
        margin: 0 26px 0 10px;
      }
    }
  }
  .loginAuto {
    position: relative;
    .checkbox {
      padding-left: 20px;
    }
    .rightLink {
      position: absolute;
      right: 20px;
      top: 0;
    }
  }
  .bottomlink {
    margin-top: 40px;
    p {
      text-align: center;
      color: #666;
      font-size: 14px;
    }
  }
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #999;
  font-size: 14px;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #999;
  font-size: 14px;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
  font-size: 14px;
}
</style>